Drilldown এবং Drill-Up হল একটি ইন্টারঅ্যাকটিভ চার্ট বৈশিষ্ট্য যা ব্যবহারকারীদের বৃহত্তর বা সূক্ষ্ম স্তরের ডেটাতে প্রবেশ করার অনুমতি দেয়। Drilldown ব্যবহৃত হয় যখন ব্যবহারকারী চার্টের কোনো অংশে ক্লিক করে ডেটার আরও বিস্তারিত বা গভীর স্তরে প্রবেশ করেন, এবং Drill-Up ব্যবহৃত হয় যখন ব্যবহারকারী আবার পূর্ববর্তী স্তরে ফিরে আসেন। এই ইন্টারঅ্যাকশনগুলো সাধারণত pie charts, bar charts, বা hierarchical charts-এ ব্যবহৃত হয়।

Google Charts API এ Drilldown এবং Drill-Up ইভেন্ট হ্যান্ডলিং খুবই সহজ এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে ব্যবহৃত হয়। এখানে আমরা আলোচনা করব কিভাবে Angular অ্যাপ্লিকেশনগুলিতে Drilldown এবং Drill-Up ইভেন্ট হ্যান্ডল করা যায়।

Drilldown এবং Drill-Up এর জন্য Google Charts Configuration

এখানে আমরা একটি Pie Chart ব্যবহার করব যেখানে Drilldown এবং Drill-Up ফিচার ব্যবহার করা হবে। প্রথমে, আমাদের কিছু ডেটা তৈরি করতে হবে, তারপর আমরা ইউজারের ক্লিক ইভেন্ট ট্র্যাক করে Drilldown এবং Drill-Up কার্যকলাপ ইমপ্লিমেন্ট করব।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি Angular অ্যাপ তৈরি করুন (যদি না থাকে):

ng new google-charts-drilldown
cd google-charts-drilldown

Step 2: Angular Google Charts লাইব্রেরি ইন্সটল করা

এখন আমরা angular-google-charts লাইব্রেরি ইনস্টল করব যা Google Charts এর সাথে ইন্টিগ্রেশন করবে।

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, app.module.ts ফাইলে GoogleChartsModule ইমপোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // GoogleChartsModule ইমপোর্ট করা হয়েছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Drilldown এবং Drill-Up Event Handling

এখন, Drilldown এবং Drill-Up ফিচার হ্যান্ডল করার জন্য আমাদের app.component.ts এবং app.component.html ফাইলগুলো কনফিগার করতে হবে।

app.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Drilldown and Drill-Up Example';

  chartType = 'PieChart'; // Chart Type
  chartData: any[] = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Initial Chart Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4, // Doughnut Style
    width: 600,
    height: 400
  };

  // Drilldown Data
  drilldownData: any[] = [
    ['Sub-task', 'Hours per Day'],
    ['Emails', 2],
    ['Meetings', 3],
    ['Coding', 3]
  ];

  // Drilldown Function
  onDrilldown(event: any) {
    const selectedItem = event.chart.getSelection()[0];
    if (selectedItem) {
      // If 'Work' is clicked, show the drilldown data
      if (event.chart.getDataTable().getValue(selectedItem.row, 0) === 'Work') {
        this.chartData = this.drilldownData;
        this.chartOptions = {
          title: 'Work Details',
          pieHole: 0.4,
          width: 600,
          height: 400
        };
      }
    }
  }

  // Drill-Up Function
  onDrillUp() {
    this.chartData = [
      ['Task', 'Hours per Day'],
      ['Work', 8],
      ['Eat', 2],
      ['Commute', 2],
      ['Watch TV', 2],
      ['Sleep', 8]
    ];
    this.chartOptions = {
      title: 'My Daily Activities',
      pieHole: 0.4,
      width: 600,
      height: 400
    };
  }

  ngOnInit() {
    google.charts.load('current', { packages: ['corechart', 'pie'] });
    google.charts.setOnLoadCallback(this.drawChart.bind(this));
  }

  drawChart() {
    const data = google.visualization.arrayToDataTable(this.chartData);
    const chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'select', this.onDrilldown.bind(this)); // Add Drilldown Event

    chart.draw(data, this.chartOptions);
  }
}

Explanation:

• onDrilldown(event): এই ফাংশনটি তখনই কল হবে যখন ইউজার চার্টে ক্লিক করবে। এখানে আমরা চেক করছি যে ইউজার "Work" টাস্কে ক্লিক করেছে কিনা এবং সেই অনুযায়ী ডেটা পরিবর্তন করছি (Drilldown Data)।
• onDrillUp(): এই ফাংশনটি আবার ইউজারকে মূল ডেটা সেটে ফিরিয়ে নিয়ে আসে। এটি সাধারণত Drill-Up ইন্টারঅ্যাকশন হিসেবে কাজ করে।

Step 5: HTML ফাইল

এখন, আমাদের app.component.html ফাইলে চার্ট রেন্ডার এবং ড্রিলডাউন, ড্রিল-আপ বাটন যুক্ত করতে হবে।

app.component.html:

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

<!-- Drill Up Button -->
<button (click)="onDrillUp()" style="margin-top: 20px;">Drill Up</button>

<!-- Chart Container -->
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Step 6: অ্যাপ্লিকেশন চালানো

এখন, অ্যাপ্লিকেশনটি চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি Drilldown এবং Drill-Up ফিচারগুলি পরীক্ষা করতে পারবেন। যখন আপনি Work টাস্কে ক্লিক করবেন, তখন ড্রিলডাউন ডেটা দেখাবে এবং "Drill Up" বাটন ক্লিক করলে মূল ডেটা ফিরে আসবে।

Drilldown এবং Drill-Up কাস্টমাইজেশন

আপনি Drilldown এবং Drill-Up ফিচারের ডেটা কাস্টমাইজ করতে পারেন:

• Drilldown Data: আপনি ড্রিলডাউন ডেটা ফাংশনে বিভিন্ন ভ্যালু বা ডেটা সেট প্রদান করতে পারেন।
• Chart Options: chartOptions ব্যবহার করে চার্টের স্টাইল এবং আকার পরিবর্তন করতে পারেন।

সারাংশ

Drilldown এবং Drill-Up ফিচারগুলি ব্যবহার করে আপনি Google Charts এর মধ্যে ইন্টারঅ্যাকটিভ ভিজুয়ালাইজেশন তৈরি করতে পারেন। Angular এর মাধ্যমে Drilldown ইভেন্ট হ্যান্ডলিং এবং Drill-Up ব্যবহারের মাধ্যমে ডেটাকে সহজে বিস্তারিত বা মূল স্তরে ফিরিয়ে আনতে পারেন। এটি ব্যবহারকারীদের জন্য আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে সহায়ক।